/**
 * Created by zzy on 2017/8/18.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    StyleSheet,
} from 'react-native';

export default class ClassifyTab extends Component{
    constructor(props){
        super(props);
        this.data=this.props.data;
        this.handler=this.props.handler;
    }

    render(){
        return <View style={{flexDirection:'row',backgroundColor:'white',padding:10,marginTop:20}}>
           {
                 this._getTabs(this.data,this.handler)
            }
        </View>
    }
    _getTabs(data,handler){
        var tabs=[];

        for(let i=0;i<data.length;i++){
            tabs.push(<TabCell data={data[i]} key={i} index={i} onpress={(index)=>{
                handler(index)
            }}/>)
        }
        return tabs;
    }
}

class TabCell extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return <TouchableOpacity
            style={[classifyTabStyle.center,{flexDirection:'row',flex:1}]}
            onPress={() => {
                this.props.onpress(this.props.index);
            }}
            >
            <View style={[classifyTabStyle.center,{flexDirection:'row',flex:1}]}>
                <Text>{this.props.data.title}</Text>
            </View>
            <View style={{width:0.5,height:20,backgroundColor:'gray'}}></View>
        </TouchableOpacity>
    }
}
const classifyTabStyle=({
    center:{
        alignItems:'center',
        justifyContent:'center'
    }
});